<template>
	<view class="content">
		<tn-toast ref="toast"></tn-toast>
		<view class="content_top">
			<image class="background-image" src="../../static/img/bg.png"></image>
			<!-- <view class="content_top_box">
				<view class="content_top_box_left">

					<view class="content_top_box_left_name">
						张建国
					</view>
				</view>
				<view class="content_top_box_right">

					<tn-avatar  @click="onImageClick(src)"  size="xl"
						:src="src"></tn-avatar>
				</view>
			</view> -->
		</view>
		<view class="content_bottom" :style="{ height: dynamicHeight }">
			<view class="content_bottom_photo">
				<tn-image-upload @on-success="handleSuccess" :sourceType="['camera']" :on-change="beforeUpload"
					:formData="formData" :deleteable="false" :action="action" :fileList="fileList"></tn-image-upload>
			</view>
			<view class="content_bottom_list">
				<view class="content_bottom_list_btn" @click="submit()">
					<span>提交</span>
				</view>
			</view>
		</view>
		<tn-modal @click="sure()" :zIndex="999999" v-model="show" :title="title" :content="content"
			:button="button"></tn-modal>

	</view>
</template>

<script>
	import {
		BASE_URL
	} from '../../utils/request.js'
	export default {
		data() {

			return {
				show: false,
				title: '上传确认',
				content: '确认之后即可提交',
				button: [{
						text: '取消',
						backgroundColor: '#E6E6E6',
						fontColor: '#333333',
						plain: true,
						shape: 'round'
					},
					{
						text: '确定',
						backgroundColor: 'tn-bg-indigo',
						fontColor: '#FFFFFF'
					}
				],
				c: null,
				formData: {
					latitude: uni.getStorageSync('latlong'),
					openId: uni.getStorageSync('OPEN_ID')
				},
				src: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/weather/icons/a0.png',
				dynamicHeight: '', // 默认高度样式
				action: '',
				fileList: [],
				isdel:false,
				boId:''
			}
		},
		computed: {

		},
		onLoad() {
			uni.getSystemInfo({
				success: (info) => {
					console.log(info, 'info')
					if (info.screenHeight <= 667) { // 假设iPhone X的高度是812像素
						this.dynamicHeight = 'calc(100% + 200rpx)'; // 如果设备高度小于iPhone X，则添加额外的200rpx
					}else{
							this.dynamicHeight = 'calc(100% - 200rpx)';
					}
				},
			});
			this.bind = 1;
			this.action = BASE_URL + '/portal/api/upSnapshot/sfeg/srm/snapshot/' + uni.getStorageSync('OPEN_ID') + '/' +
				uni.getStorageSync('latlong') + '/' + this.bind;
			console.log(this.action, 'this.action')

		},
		onUnload() {
			console.log('111111111111')
			if(!this.isdel){
				console.log('55555');
				console.log(this.boId,'222222222');
				this.del();
			}
		 //    console.log('用户离开了当前页面');
			// this.del();
		    // 在这里可以执行离开页面时的逻辑
		  },

		methods: {
		async	del(){
			console.log(this.boId,'5255555555')
			var that=this;
				try {
				
					const url = '/portal/r/w'; // 替换为你的 API 地址
					const params = {
						// 构造你的请求参数
						sid: uni.getStorageSync('SID'),
						cmd: 'sfeg.srm.workers.join.apply.snapshotCancel',
						openId: uni.getStorageSync('OPEN_ID'),
						uaInfo: '809653211',
						fileId:'',
						boId:that.boId
					};
				
					// 发送 POST 请求
					const response = await that.$get(url, params);
				
					// 处理请求成功的逻辑
					console.log('删除111', response);
					if (response.result == 'ok') {
					
					}
				
				} catch (error) {
					// 处理请求失败的逻辑
					console.error('请求失败', error);
				}
			},
			sure(index) {
				if (index.index == 0) {
					this.show = false;
				} else {
					this.isdel=true;
					this.show=false;
					this.$refs.toast.show({
					
						content: '提交成功',
						icon: 'success', // 不显示图标
						duration: 2000 // 显示时长 2000ms
					});
					setTimeout(function() {
					  uni.switchTab({
					  	url: '../../pages/person/person'
					  });
					}, 2000);
				
				}


			},
			handleSuccess(data, index, lists, name) {
		
				this.boId=data.data.boId;
			console.log(this.boId,'this.boId')
				this.bind = data.data.bindId;
				this.action = BASE_URL + '/portal/api/upSnapshot/sfeg/srm/snapshot/' + uni.getStorageSync('OPEN_ID') +
					'/' + uni.getStorageSync('latlong') + '/' + this.bind;
				// uni.setStorageSync('imgbinb', data.data.bindId);
				
			

				// 在这里可以根据上传成功的数据执行相应的操作
			},
			beforeUpload(index, lists) {
				console.log(index, lists)

			},

			onImageClick(imageUrl) {
				this.$previewSingleImage(imageUrl);
			},
			// 图片预览方法
			previewImage() {
				const current = this.src;

				// 使用 uni.previewImage API 预览单张图片
				uni.previewImage({
					current: current, // 当前显示图片的链接
					// urls 数组只需要包含当前图片的URL，因为只预览一张
					urls: [current]
				});
			},
			submit() {
				this.show = true;
				// uni.switchTab({
				// 	url: '../../pages/index/index'
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		/* 占据整个视口高度 */
		display: flex;
		flex-direction: column;
		position: relative;
		/* 相对定位，以便子元素可以相对于它定位 */
	}

	.content_top {

		position: relative;
		/* 设置相对定位，以便子元素可以相对于它定位 */
		width: 100%;
		/* 宽度百分之百 */
		height: 500rpx;
		/* 设置高度 */
		overflow: hidden;

		/* 触发 BFC */
		.background-image {
			position: absolute;
			/* 设置绝对定位，让背景图充满整个父容器 */
			top: 0;
			left: 0;
			width: 100%;
			/* 宽度百分之百 */
			height: 100%;
			/* 高度百分之百 */
			object-fit: cover;
			/* 图片填充父容器 */
			z-index: -1;
			/* 将背景图放到底层 */
		}

		.content_top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 33rpx 73rpx 0 73rpx;

			.content_top_box_left {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 48rpx;
				color: #FFFFFF;
			}

			.content_top_box_right {}
		}
	}

	.content_bottom {
		flex: 1;
		/* 自动填充剩余空间 */
		position: absolute;
		/* 绝对定位，覆盖在 .content_top 上方 */
		top: 200rpx;
		/* 位于父容器顶部下方 200rpx 处 */
		width: 100%;
		/* 宽度百分之百 */
		height: calc(100% - 200rpx);
		/* 高度占满父容器下方 */
		background-color: #F8F9FD;
		/* 背景色，可根据需要修改 */
		z-index: 0;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;

		/* 确保在 content_top 之下 */
		// display: flex;
		// justify-content: center;
		// align-items: center;
		.content_bottom_success {
			margin-top: 100rpx;

			text-align: center;
			position: relative;

		}

		.container {

			position: absolute;

			left: 50%;
			transform: translateX(-50%);
		}

		.content_bottom_success_icon {
			position: relative;
			width: 420rpx;
			height: auto;
			/* 样式调整 */
		}

		.content_bottom_success_entry {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			/* 文本居中对齐 */
			color: #fff;
			/* 文本颜色，可根据需要调整 */
			width: 100%;
			/* 样式调整 */
		}

		.content_bottom_success_entry_title {
			margin-bottom: 24rpx;
		}

		.content_bottom_success_entry_title,
		.content_bottom_success_entry_time {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 48rpx;
			color: #FFFFFF;
			/* 样式调整 */
		}

		.content_bottom_success_title {
			display: flex;
			justify-content: center;
			/* text-align: center; */
			align-items: center;
			margin-top: 88rpx;

			.content_bottom_success_title_det {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 48rpx;
				color: #FF2D2D;
				margin-left: 26rpx;
			}
		}

		.content_bottom_list {
			position: absolute;
			bottom: 83rpx;
			left: 5%;

			.content_bottom_list_btn {
				text-align: center;

				span {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #FFFFFF;
					background: linear-gradient(90deg, #3A84FD 0%, #536AFF 100%);
					border-radius: 40rpx;
					padding: 21rpx 300rpx;
				}
			}
		}




	}

	.content_bottom_photo {
		padding: 33rpx;
	}
</style>